<template>
	<view class="my">
		<image src="@/static/my-back.png" class="top-back"></image>

		<view class="my-logo">
			<image v-if="vuex_has_login" class="logo" :src="vuex_user.avatar"></image>
			<image v-else class="logo" src="@/static/ava.png" @click="isShowLogin()"></image>

			<view class="my-name" v-if="vuex_has_login">
				<text class="name">{{ vuex_user.nickname }}</text>
				<!-- 	<text v-if="vuex_user.group_id == 2" class="name name-1"> / 签到员</text>
				<text v-else-if="vuex_user.auth_status == 2" class="tags tags-1">已认证</text>
				<text v-else class="tags tags-2">未认证</text> -->
			</view>
			<view class="my-name" v-else>
				<text class="name" @click="isShowLogin()">点击登录</text>
			</view>
		</view>

		<view class="qrcode" v-if="vuex_user.group_id != 2">
			<!-- <view class="flex_box"> -->
			<view class="s1">
				<view class="s1-title">今日岗位<text
						style="font-size: 24rpx;color: #606266;">（{{$u.timeFormat(new Date(), 'mm/dd')}}）</text></view>
				<text>{{vuex_user.job_name||'-'}}</text>
			</view>

			<view class="s1">
				<view class="s1-title">所属部门</view>
				<text>{{vuex_user.depart_name||'-'}}</text>
			</view>
			<!-- </view> -->
			<!-- <view class="ref_time" v-if="vuex_user.next_sign_time != ''">
				* 下次签到时间： {{ vuex_user.next_sign_time }}
			</view> -->
		</view>

		<view class="nav">


			<u-cell title="岗位联系人" @click="goPhone" isLink>
				<template #value>
					<view class="right-value" v-if="vuex_has_login">
						<text style="margin-right: 6rpx;">{{vuex_user.contactor}}</text>
						<text>{{vuex_user.phone}}</text>
					</view>
				</template>
				<image class="img" slot="icon" src="@/static/cantant.png"></image>
			</u-cell>
			<u-cell title="点击签到和记录" isLink @click="goInfo('/pages/my/checkAndClock')">

				<image class="img" slot="icon" src="@/static/records.png"></image>
			</u-cell>

			<u-cell :border="false" isLink title="工作按排及签到记录" @click="goInfo('/pages/my/detail')">
				<image class="img" slot="icon" src="@/static/rili.png"></image>
			</u-cell>
			<!-- <u-cell title="实名认证" :value="vuex_user.auth_time_text" isLink
				@click="goInfo('card')">
				<image class="img" slot="icon" src="@/static/my-3.png"></image>
			</u-cell> -->



		</view>
		<view class="nav">
			<u-cell title="完善用户信息"
				:titleStyle="{color:'#303133 !important','fontSize': '16px !important','font-weight':500}">

			</u-cell>
			<view class="way">方式一： 适用后台已有数据用户</view>
			<u-cell title="通过手机号关联" :border="false" isLink @click="goInfo('/pages/my/bindPhone')">
				<template #value>
					<view class="right-value" v-if="vuex_has_login">
						<text v-if="!vuex_user.rel">未关联</text>
						<text v-if="vuex_user.rel">已关联</text>
					</view>
				</template>
			</u-cell>

			<view class="way">方式二： 适用自招兼职人员申请</view>
			<u-cell title="完善用户信息" :border="false" isLink @click="goInfo('/pages/my/info')">

			</u-cell>
			<u-cell title="实名认证" :border="false" isLink @click="goInfo('card')">
				<template #value>
					<view class="right-value" v-if="vuex_has_login">
						<text>{{vuex_user.confirm_idcard==1?'已实名':vuex_user.confirm_idcard==2?'未通过':''}} </text>
					</view>
				</template>
			</u-cell>






		</view>

		<view v-if="vuex_has_login" class="out" @click="logout()">退出登录</view>

		<!-- <my-tabbar :act="1"></my-tabbar> -->

		<u-modal @close='onClose' :show="show" title="授权电话号码" content='为了保证注册信息真实性和系统管理员方便联系你，我们需要你的电话号码授权'
			:closeOnClickOverlay="true">
			<u-button slot='confirmButton' text='下一步' type='success' shape='circle' color='#30D6C2'
				:customStyle='{width: "264rpx"}' open-type="getPhoneNumber"
				@getphonenumber='getPhoneNumber()'></u-button>
		</u-modal>

		<u-popup @close='onClose' :show="show1" mode='center' bgColor='transparent' :safe-area-inset-bottom='false'
			:overlayStyle="{background: 'rgba(217,217,217,0.6)'}" :closeOnClickOverlay="true">
			<view class="login">
				<view class="back"></view>
				<view class="logo">
					<button type="balanced" open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<text v-if="!avatarUrl">设置头像</text>
						<image v-else :src="avatarUrl"></image>
					</button>

				</view>
				<view class="tit">你的昵称</view>
				<view class="input">
					<input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
						@input="bindinput" />
				</view>
				<view class="but">
					<u-button type="success" text="注册及登录" shape='circle' color='#30D6C2' @click="register()"></u-button>
				</view>
			</view>
		</u-popup>


		<u-popup :show="qrShow" mode='center' :round="10" closeable :safe-area-inset-bottom='false' @close="onClose"
			:overlayStyle="{backgroundColor: 'rgba(217,217,217,0.6)'}">
			<view class="my-qrcode">
				<view class="tit">我的二维码</view>
				<view class="image">
					<image :src='vuex_user.qrcode'></image>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	// import myTabbar from '@/components/myTabbar.vue';
	import conf from '@/common/config.js';
	export default {
		// components: {
		// 	myTabbar
		// },
		data() {
			return {
				show: false,
				show1: false,
				qrShow: false,
				nickName: '',
				avatarUrl: '',
				avatar: '',
				auth_time_text: '',
				user_local_phone: '',
				config: {}
			}
		},
		
		onLoad() {
			// let that = this
			// that.$API.commonConfig().then(res => {
			// 	that.config = res.data
			// })
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			});
		},
		onShow() {
			if (this.vuex_token) {
				this.updateInfo()
			}
		},
		methods: {
			updateInfo() {
				let that = this
				that.$API.getUserInfo().then(res => {
					that.$u.vuex('vuex_user', {
						...this.vuex_user,
						...res.data.base_info,
						...res.data.job_info,
						...res.data.clock_info,
						person_info: res.data.person_info
					});
				})
			},
			// 先尝试直接登录
			isShowLogin() {
				var that = this;
				uni.login({
					provider: 'weixin',
					success: (res) => {
						this.code = res.code //  把code进行暂存
						that.$API.userLoginApi({
							code: res.code
						}).then(res => {
							console.log(res);
							if (res.code == 1) {
								this.vuex_login(res.data.userinfo)
								this.updateInfo()
							} else {
								this.show1 = true // 显示得到电话的弹窗
							}
						})
					},
					fail: (err) => {
						console.log(err);
					},
				})

			},
			bindblur(e) {
				// 获取微信昵称
				console.log('nickName', e)
				this.nickName = e.detail.value;
			},
			bindinput(e) {
				console.log('nickName', e)
				this.nickName = e.detail.value;
			},
			chooseavatar({
				target: {
					avatarUrl
				}
			}) {
				console.log(avatarUrl);
				uni.uploadFile({
					url: conf.url_config + '/api/common/upload',
					filePath: avatarUrl,
					name: 'file',
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data);
						this.avatarUrl = data.data.fullurl
						this.avatar = data.data.url;
					}
				});
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.$u.toast('授权拒绝');
					return false;
				}
				this.$API.getPhoneNumber({
					code: e.detail.code
				}).then(res => {
					if (res.code == 1) {
						this.user_local_phone = res.data.phone // 暂时本地放放
						this.show1 = true
						this.show = false
					} else {
						this.show1 = false // 显示手像和昵称的窗口
						this.show = false // 关闭电话窗口
					}
				})
			},
			register() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res);
						that.$API.mpWeixinRegisterAndLogin({
							code: res.code,
							nickname: this.nickName,
							avatar: this.avatar,
						}).then(res => {
							console.log(res);
							this.show1 = false;
							uni.$u.toast('注册成功')
							this.vuex_login(res.data.userinfo)
							this.updateInfo()
						})
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			setScan() {
				if (!this.vuex_token) {
					uni.showToast({
						title: '请先登录，才能进行下面操作！',
						duration: 3000,
						icon: 'none'
					})
					return false;
				}
				let lat = this.vuex_theme.latitude || ''
				let lng = this.vuex_theme.longitude || ''
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.$API.getTaskTask({
							id: that.vuex_user.id,
							code: res.result,
							lat: lat,
							lng: lng
						}).then(res => {
							uni.showModal({
								title: '提示',
								content: res.msg,
								success: function(res) {

								}
							})
						})
					}
				});
			},
			onQrcode() {
				if (!this.vuex_token) {
					uni.showToast({
						title: '请先登录，才能进行下面操作！',
						duration: 3000,
						icon: 'none'
					})
					return false;
				}
				this.qrShow = true
			},
			onClose() {
				this.show = false
				this.show1 = false
				this.qrShow = false
			},
			logout() {
				uni.showLoading({})
				uni.clearStorageSync()
				this.$u.vuex('vuex_user', {})
				this.$u.vuex('vuex_token', '')
				this.$u.vuex('vuex_has_login', false)
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
				// this.$API.logout().then((res) => {
				// 	if (res.code == 1) {
				// 		this.vuex_logout();
				// 		this.auth_time_text = '';
				// 		this.$u.toast('退出成功')
				// 	} else {
				// 		this.$u.toast('退出失败,请联系客服')
				// 	}
				// }).finally(() => {
				// 	uni.hideLoading({})
				// })
			},
			goInfo(url) {
				if (!this.vuex_token) {
					uni.showToast({
						title: '请先登录，才能进行下面操作！',
						duration: 3000,
						icon: 'none'
					})
					return false;
				}
				if (url == '/pages/my/bindPhone' && this.vuex_user.rel == 1) return
				if (url == 'card') {
					if (this.vuex_user.confirm_idcard == 1) {
						return false;
					}
					url = '/pages/my/card';
				}
				uni.navigateTo({
					url
				})
			},
			goPhone() {
				uni.makePhoneCall({
					phoneNumber: this.vuex_user.phone,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-back {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.my-logo {
		position: relative;
		height: auto;
		margin: 100rpx 0 46rpx 0;
		text-align: center;

		.logo {
			width: 140rpx;
			height: 140rpx;
			background: #fff;
			border-radius: 100%;
			border: 5rpx solid #fff;
			margin: 0 auto;
		}

		.my-name {
			height: 56rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.name {
				font-size: 32rpx;
				line-height: 48rpx;
				color: #fff;
			}

			.name-1 {
				padding-left: 8rpx;
			}

			.tags {
				width: 120rpx;
				height: 48rpx;
				background: #F59C32;
				border-radius: 24rpx;
				text-align: center;
				line-height: 48rpx;
				color: #fff;
				font-size: 28rpx;
				margin-left: 24rpx;
			}

			.tags-1 {
				background-color: #3632F5;
			}

			.tags-2 {
				background-color: #F59C32;
			}
		}
	}

	.qrcode {
		width: 702rpx;
		height: auto;
		// background-color: #fff;
		border-radius: 16rpx;
		position: relative;
		margin: 0 auto;
		padding: 40rpx 0 40rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.flex_box {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.ref_time {
			padding: 0 24rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #909399;
			line-height: 50rpx;
			margin-bottom: 20rpx;
			margin-top: 28rpx;
		}

		.s1 {
			width: 338rpx;
			height: 158rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #EBEBEB;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			position: relative;
			padding: 7rpx 0;
			color: #606266;
			box-sizing: border-box;
			padding: 16rpx 24rpx;

			&-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;

			}



			image {
				width: 80rpx;
				height: 80rpx;
			}

			text {
				height: 56rpx;
				line-height: 56rpx;
				margin-top: 10rpx;
				text-align: center;
				width: 100%;
				font-weight: 500;
				font-size: 36rpx;
				color: #303133;
			}
		}
	}

	.nav {
		width: 702rpx;
		background-color: #fff;
		margin: 32rpx auto;
		position: relative;
		border-radius: 16rpx;
		padding: 0 24rpx;
		box-sizing: border-box;

		.img {
			width: 40rpx;
			height: 40rpx;
		}

		/deep/ .u-cell__value {
			color: #909399;
			font-size: 24rpx;
		}

		/deep/ .u-cell__body {
			height: 96rpx;
			padding: 10rpx 0;
		}

		/deep/ .u-cell__left-icon-wrap {
			margin-right: 24rpx;
		}

		/deep/ .u-cell__title-text {
			font-size: 28rpx;
			font-weight: 400;
			color: #606266 !important;
		}

		.contact {
			width: 100%;
			height: 100%;
			background-color: #fff;
			border: 0;
			padding: 0;
			margin: 0;
			text-align: left;
			font-size: 28rpx !important;
			font-weight: 400 !important;
			color: #606266 !important;
		}
	}

	.out {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		color: #909399;
		text-align: center;
		bottom: 174rpx;
		margin-top: 60rpx;
		margin-bottom: 100rpx;
	}

	.login {
		width: 650rpx;
		height: 552rpx;

		.back {
			width: 650rpx;
			height: 452rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: absolute;
			left: 0;
			bottom: 0;
		}

		.logo {
			width: 200rpx;
			height: 200rpx;
			background: #F3F4F6;
			border-radius: 100%;
			border: 2rpx solid #C0C4CC;
			position: absolute;
			left: 225rpx;
			top: 0;
			overflow: hidden;

			button {
				padding: 0;

				text {
					width: 200rpx;
					height: 200rpx;
					text-align: center;
					line-height: 200rpx;
					display: block;
					font-size: 28rpx;
					color: #C0C4CC;
				}

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 100%;
				}
			}
		}

		.tit {
			top: 228rpx;
			left: 46rpx;
			height: 56rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #303133;
			line-height: 56rpx;
			position: absolute;
		}

		.input {
			width: 554rpx;
			height: 74rpx;
			position: absolute;
			top: 306rpx;
			left: 48rpx;

			.weui-input {
				width: 524rpx;
				height: 74rpx;
				background: #F3F4F6;
				border-radius: 4rpx;
				font-size: 28rpx;
				padding: 0 15rpx;
				border: 2rpx solid #C0C4CC;
				color: #C0C4CC;
			}

			.weui-input::-webkit-input-placeholder {
				color: #C0C4CC;
			}
		}

		.but {
			width: 264rpx;
			height: 80rpx;
			position: absolute;
			top: 432rpx;
			left: 194rpx;
		}
	}

	.my-qrcode {
		width: 614rpx;
		height: 652rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.tit {
			height: 56rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
			line-height: 56rpx;
			margin: 50rpx 0;
		}

		.image {
			width: 398rpx;
			height: 398rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			opacity: 1;
			border: 2rpx solid #606266;
			padding: 16rpx;

			image {
				width: 398rpx;
				height: 398rpx;
			}
		}
	}

	.my {
		/deep/ .u-modal__title {
			padding: 60rpx 0 !important;
			font-size: 36rpx !important;
			font-weight: 500 !important;
			color: #303133 !important;
		}

		/deep/ .u-modal__content {
			padding: 0 66rpx 56rpx 66rpx !important;

		}

		/deep/ .u-modal__content__text {
			font-size: 28rpx;
			font-weight: 400;
			color: #606266 !important;
			line-height: 50rpx !important;
		}

		/deep/ .u-button {
			width: 264rpx !important;
			margin-bottom: 40rpx !important;
			box-sizing: border-box;
			font-size: 32rpx !important;
			font-weight: 500 !important;
			color: #FFFFFF !important;
		}

		/deep/ .u-cell__value {
			font-size: 24rpx;
			font-weight: 300;
			color: #909399;
		}
	}

	.right-value {
		font-weight: 400;
		font-size: 28rpx;
		color: #606266;
	}

	.way {
		margin-top: 22rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #303133;
		line-height: 50rpx;
	}
</style>